import React from 'react';
import ReactDom from 'react-dom';
import Button from 'views/component/button/button';
import './bag.scss';
import { api } from 'js/api/api';
import playerStore from 'js/store/playerStore';
import iconData from 'js/data/iconData';


class Bag extends React.Component {
    constructor() {
        super()
        this.state = {
            bag: null,
            warehouse: null,
            selectPartnerId: null,
            selectBagIndexId: null,
            selectEquimentType: null,
            selectPartner: null,
            showType: 1
        }
    }
    componentDidMount() {
        this.getBag();
    }
    getBag = () => {
        api('getBag', (err, data) => {
            this.setState({ bag: data })
        });
    }
    getWarehouse = () => {
        api('getWarehouse', (err, data) => {
            this.setState({ warehouse: data })
        });
    }
    close = () => {
        if (this.props.beforeClose) {
            this.props.beforeClose();
        }
        this.props.close();
    }
    onClick = (indexId, partner) => {
        this.setState({ selectPartnerId: indexId, selectPartner: partner })
    }
    bagClick = (index) => {
        this.setState({ selectBagIndexId: index, selectEquimentType: null })
    }
    equiment = (bagIndex, weaponType = 0) => {
        api('equip', { bagIndex: bagIndex, partnerId: this.state.selectPartnerId, weaponType: weaponType }, (err, data) => {
            this.setState({ selectBagIndexId: null });
        });
    }
    getItemInfo = (selectBagIndexId, selectEquimentType) => {
        let itemInfo = null, handleNode = null, contentNode = [];
        let propName = window.propName;
        let player = playerStore.player;
        if (selectBagIndexId !== null || selectEquimentType) {
            let item;
            if (selectEquimentType) {
                if (this.state.selectPartner) {
                    item = this.state.selectPartner.equipments[selectEquimentType];
                }
            } else {
                item = player.bag.items[selectBagIndexId];
            }
            let templateId = item.templateId;
            let totalConfig = window.totalConfig;
            if (parseInt(templateId / 10000) === 51) {
                //类型1武器2头3胸4手5脚6戒指7耳环
                let equimentText = { 1: '武器', 2: '头部', 3: '胸部', 4: '手部', 5: '脚部', 6: '戒指', 7: '耳环' };
                let weaponPartText = { 1: '双手', 2: '单手', 3: '副手' };
                let attriText = {
                    maxHp: '生命', attack: '攻击力', pdef: '物防', ldef: '法防', crit: '暴击', critHurt: '暴伤', toughness: '韧性',
                    guard: '守护', speed: '速度', recover: '回血', con: '暗', str: '火', will: '水', sta: '暗', agile: '雷',
                }
                let weaponTypeText = {
                    1: '剑', 2: '斧', 3: '刀', 4: '法杖', 5: '权杖', 6: '弓', 7: '法书', 8: '盾', 9: '匕首'
                };
                //weaponPart 武器部位1双手2单手2副手
                //weaponType 武器类型1剑2斧3刀4法杖5权杖6弓7法书8盾9匕首

                let equipmentConfig = totalConfig.equipment[templateId];
                if (equipmentConfig.type === 1) {
                    contentNode.push(<div key={1}>武器类型:{weaponTypeText[equipmentConfig.weaponType]}</div>)
                    contentNode.push(<div key={2}>武器部位:{weaponPartText[equipmentConfig.weaponPart]}</div>)
                } else {
                    contentNode.push(<div key={3}>装备部位:{equimentText[equipmentConfig.type]}</div>)
                }
                let j = 4;
                if (item.mainAttri) {
                    for (let [attri, value] of Object.entries(item.mainAttri)) {
                        contentNode.push(<div key={j}>{attriText[attri]}:{value}</div>)
                        j += 1;
                    }
                }
                if (selectEquimentType) {
                    handleNode = <div className="item-button" onClick={() => { this.equipUnload(selectEquimentType) }}>卸下</div>
                } else {
                    handleNode = <div className="item-button" onClick={() => { this.equiment(selectBagIndexId) }}>装备</div>
                }
            }
            if (item) {
                itemInfo = <div className="itemInfo flex-col">
                    <div className="name">{propName[item.templateId]}</div>
                    <div className="content flex-g-1">{contentNode}</div>
                    <div className="handle flex-center">{handleNode}</div>
                </div>
            }
        }
        return itemInfo;
    }
    equipUnload = (selectEquimentType) => {
        api('equipUnload', { weaponPart: selectEquimentType, partnerId: this.state.selectPartnerId }, () => {
            this.setState({ selectEquimentType: null })
            this.getBag();
        })
    }
    discard = () => {
        if (this.state.selectBagIndexId !== null) {
            api('bagDiscard', { bagIndex: this.state.selectBagIndexId }, () => {
                this.getBag();
            })
        }
    }
    getEquipmentText = (type) => {
        if (this.state.selectPartner) {
            let equipment = this.state.selectPartner.equipments[type];
            let equipmentConfig = totalConfig.equipment[equipment.templateId];
            return equipment.name;
        }
    }
    getPartnerInfo = () => {
        if (this.state.selectPartner) {
            let partner = this.state.selectPartner;
            let fightAttri = partner.fightAttri;
            let basicInfo = partner.basicInfo;
            let node = <div className="flex partner-attri-info">
                <div className="list">
                    <div className="item">名字:{partner.name}</div>
                    <div className="item">等级:{basicInfo.lvl}</div>
                    <div className="item">职业:{fightAttri.lvl}</div>
                </div>
                <div>
                    <div className="flex">
                        <div className="list">
                            <div className="item">生命:{fightAttri.maxHp}</div>
                            <div className="item">攻击:{fightAttri.attack}</div>
                            <div className="item">物防:{fightAttri.pdef}</div>
                            <div className="item">法防:{fightAttri.ldef}</div>
                        </div>
                        <div className="list">
                            <div className="item">韧性:{fightAttri.toughness}</div>
                            <div className="item">守护:{fightAttri.guard}</div>
                            <div className="item">速度:{fightAttri.speed}</div>
                            <div className="item">暴击:{fightAttri.crit}</div>
                        </div>
                        <div className="list">
                            <div className="item">暴伤:{fightAttri.critHurt}</div>
                            <div className="item">回血:{fightAttri.recover}</div>

                        </div>
                    </div>
                    <div className="item">可分配属性点:{basicInfo.attriPoint}</div>
                </div>

                <div className="list">
                    <div className="item">体质:{fightAttri.con}</div>
                    <div className="item">力量:{fightAttri.str}</div>
                    <div className="item">意志:{fightAttri.will}</div>
                    <div className="item">耐力:{fightAttri.sta}</div>
                    <div className="item">敏捷:{fightAttri.agile}</div>
                </div>

            </div>
            return node;
        }
    }
    equipmentClick = (type) => {
        if (this.state.selectPartner) {
            let equipment = this.state.selectPartner.equipments[type];
            if (equipment) {
                this.setState({ selectEquimentType: type, selectBagIndexId: null });
            }
        }
    }
    render() {
        let { bag, warehouse, selectPartnerId, selectPartner, selectBagIndexId, selectEquimentType, showType } = this.state;
        let node = [];
        let propName = window.propName;
        let player = window.player;
        let battleTeams = player.battleTeams;
        let teams = battleTeams
        let itemInfo = null;

        if (showType === 1 && bag) {
            node = bag.items.map((item, i) => {
                if (item) {
                    return <div className={"item flex-vcenter" + (selectBagIndexId === i ? ' active' : '')}
                        key={i} onClick={() => { this.bagClick(i) }}>
                        {propName[item.templateId]}
                        <div className="bag-item-number">{item.stack}</div>
                    </div>
                } else {
                    return <div className="item" key={i}></div>
                }
            });
        }
        return <div id="bag">
            <div className="bag flex-col">
                <div className="partner-info">
                    {this.getPartnerInfo()}
                </div>
                <div className="flex partner">
                    <div className="partner-equipment flex">
                        <div className="partner-list">
                            {teams.map(item => {
                                if (item) {
                                    return <div className={"partner-headimg flex-center partner-font" + (item.indexId === selectPartnerId ? ' active' : '')}
                                        key={item.indexId} onClick={() => { this.onClick(item.indexId, item) }}>
                                        <div className={"fonts fonts-" + iconData[item.templateId]}></div>
                                    </div>
                                }
                            })}
                        </div>
                        <div className="equipment flex-g-1">
                            <div className="equipment-item flex">
                                <div className="name">
                                    武器
                                </div>
                                <div className={"equipment-content" + (selectEquimentType === 'weapon' ? ' active' : '')} onClick={() => { this.equipmentClick('weapon') }}>{this.getEquipmentText('weapon')}</div>
                            </div>
                            <div className="equipment-item flex">
                                <div className="name">头部</div>
                                <div className={"equipment-content" + (selectEquimentType === 'head' ? ' active' : '')} onClick={() => { this.equipmentClick('head') }}>{this.getEquipmentText('head')}</div>
                            </div>
                            <div className="equipment-item flex">
                                <div className="name">身体</div>
                                <div className={"equipment-content" + (selectEquimentType === 'body' ? ' active' : '')} onClick={() => { this.equipmentClick('body') }}>{this.getEquipmentText('body')}</div>
                            </div>
                            <div className="equipment-item flex">
                                <div className="name">手部</div>
                                <div className={"equipment-content" + (selectEquimentType === 'hand' ? ' active' : '')} onClick={() => { this.equipmentClick('hand') }}>{this.getEquipmentText('hand')}</div>
                            </div>
                            <div className="equipment-item flex">
                                <div className="name">脚部</div>
                                <div className={"equipment-content" + (selectEquimentType === 'foot' ? ' active' : '')} onClick={() => { this.equipmentClick('foot') }}>{this.getEquipmentText('foot')}</div></div>
                            <div className="equipment-item flex">
                                <div className="name">戒指</div>
                                <div className={"equipment-content" + (selectEquimentType === 'ring' ? ' active' : '')} onClick={() => { this.equipmentClick('ring') }}>{this.getEquipmentText('ring')}</div></div>
                            <div className="equipment-item flex">
                                <div className="name">耳环</div>
                                <div className={"equipment-content" + (selectEquimentType === 'ear' ? ' active' : '')} onClick={() => { this.equipmentClick('ear') }}>{this.getEquipmentText('ear')}</div></div>
                        </div>
                    </div>
                    <div className="bag-info flex-g-1">
                        {this.getItemInfo(selectBagIndexId, selectEquimentType)}
                    </div>
                </div>
                <div className="flex-g-1  flex wrap  bag-content">{node}</div>
                <div className="line"></div>
                <div className="bag-bottom">
                    <div className="flex jc-end lineItem1">
                        <div className="gold">金币&nbsp;&nbsp;{player.basicInfo.gold}</div>
                        <div className="diamond">钻石&nbsp;&nbsp;</div>
                    </div>
                    <div className="flex-vcenter jc-end lineItem2">
                        <div className="bag-button" onClick={this.discard}>丢弃</div>
                        <div className="bag-button">扩展格子+1</div>
                        <div className="bag-button">整理</div>
                    </div>
                </div>
                <div className="menu flex">
                    {/* <div className={"menu-item flex-center" + (showType === 1 ? ' menuActive' : '')} onClick={() => { this.setState({ showType: 1 }) }}>
                        <div>仓库</div>
                    </div> */}
                    <div className={"menu-item flex-center" + (showType === 1 ? ' menuActive' : '')} onClick={() => { this.setState({ showType: 1 }) }}>
                        <div>背包</div>
                    </div>
                    <div className={"menu-item flex-center"}>
                        <div>八卦牌</div>
                    </div>
                    <div className={"menu-item flex-center"}>
                        <div>技能</div>
                    </div>
                    <div className="flex-g-1"></div>
                    <div className="team menu-item flex-center" onClick={this.close}>
                        <div>关闭</div>
                        <div className="fonts fonts-arrow-right2"></div>
                    </div>
                </div>
            </div>
        </div>
    }
}

export default Bag;